<template>
  <div class="change-history">
    <div class="container">
      <div class="table-map">
        <a-table
          class="hte-table-content"
          :columns="kpi.columns"
          :data-source="kpi.data"
          bordered
          size="middle"
          :loading="tableLoading"
          :rowKey="
            (record, index) => {
              return index
            }
          "
        >
        </a-table>
      </div>
    </div>
  </div>
</template>
<script>
import { getAction, postAction } from '@/api/manage'
import { ACCESS_TOKEN, USER_INFO } from '@/store/mutation-types'
import moment from 'moment'
import Vue from 'vue'
export default {
  name: 'TaskTechProcess',
  props: {
    detailId: {
      type: String,
      required: true,
    },
    modalType: {
      type: String,
      required: false,
    },
    processInstanceId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      kpi: {
        columns: [
          {
            title: '流程名称',
            align: 'center',
            dataIndex: 'taskContent',
          },
          {
            title: '发起人',
            dataIndex: 'bugLevel',
            align: 'center',
            width: '15%',
          },
          {
            title: '发起时间',
            dataIndex: 'startDate',
            align: 'center',
            width: '15%',
          },
          {
            title: '当前处理步骤',
            dataIndex: 'endDate',
            align: 'center',
            width: '15%',
          },
          {
            title: '处理人',
            dataIndex: 'handleUserName',
            align: 'center',
            width: '15%',
          },
          {
            title: '状态',
            dataIndex: 'realCompletionDate',
            align: 'center',
            width: '15%',
          },
        ],
        data: [],
        selRowIds: [],
      },
      tableLoading: false,
      url: {
        getTechTaskProcessList: '/projectWorkTask/getTechTaskProcessList',
      },
      processColumns: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          align: 'center',
          width: 50,
          customRender: (text, record, index) => `${index + 1}`,
        },
        {
          title: '审批步骤',
          align: 'center',
          dataIndex: 'name',
          width: '15%',
        },
        {
          title: '操作状态',
          dataIndex: 'auditStatus',
          align: 'center',
          width: '15%',
        },
        {
          title: '接收时间',
          dataIndex: 'startTimeStr',
          align: 'center',
          width: '15%',
        },
        {
          title: '操作时间',
          dataIndex: 'endTimeStr',
          align: 'center',
          width: '15%',
        },
        {
          title: '操作人',
          dataIndex: 'assignee',
          align: 'center',
          width: '15%',
        },
        {
          title: '审批意见',
          dataIndex: 'message',
          align: 'center',
        },
      ],
    }
  },
  mounted() {
    if (this.modalType == '30') {
      this.kpi.columns = this.processColumns
      this.initItProcess()
    } else {
      this.initData()
    }
  },
  methods: {
    initItProcess() {
      if (this.tableLoading) {
        return
      }
      this.tableLoading = true
      getAction('/flow/api/task/history', {
        processInstanceId: this.processInstanceId,
      })
        .then((res) => {
          if (res.code === 200 && res.data) {
            this.kpi.data = res.data || []
          } else {
            this.$message.error(res.message)
          }
          this.tableLoading = false
        })
        .catch((res) => {
          this.tableLoading = false
        })
    },
    dateFormat(date) {
      return date ? moment(date).format('YYYY-MM-DD') : ''
    },
    initBugStatus(text) {
      switch (text) {
        case 1:
          return '复测不通过'
          break
        case 2:
          return '复测通过'
          break
        default:
          return '待复测'
      }
    },
    disabledCurrent(current) {
      return current > moment().endOf('day')
    },
    initData() {
      if (this.tableLoading || !this.detailId) {
        return
      }
      this.tableLoading = true
      const last = this.detailId.slice(this.detailId.length - 1)
      const detailId = last && last == 'p' ? this.detailId.slice(0, this.detailId.length - 1) : this.detailId
      getAction(this.url.getTechTaskProcessList, {
        detailId: detailId,
      })
        .then((res) => {
          if (res.code === 200 && res.result && res.result.records) {
            this.kpi.data = res.result.records || []
          } else {
            this.$message.error(res.message)
          }
          this.tableLoading = false
        })
        .catch((res) => {
          this.tableLoading = false
        })
    },
  },
}
</script>
<style lang="less" scoped>
.change-history {
  .content {
    width: 80%;
    color: #333;
  }
  .time {
    color: #999;
  }
  .pagecontent {
    padding: 10px 2px 0 2px;
    text-align: right;
  }
  .loaddingbox {
    text-align: center;
    padding: 50px;
  }
}
</style>